[V0_FILE]png:file="public/abstract-gradient-dark-purple-blue.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-gradient-dark-purple-blue-J7FTpunl22jP72TNKBY6TQP6npKOvL.png" isMerged="true" [V0_FILE]jpg:file="public/fractal-glass-background.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Fractal%20Glass%20-%203.jpg-mHRZjCz3CUAYQ8ME9O55wsHcIjLfa5.jpeg" [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Star, Send, X } from "lucide-react" import { Button } from "@/components/ui/button" export default function ProductReviewForm() { const [rating, setRating] = useState(0) const [hoveredRating, setHoveredRating] = useState(0) const [formData, setFormData] = useState({ productName: "", reviewTitle: "", reviewText: "", pros: "", cons: "", wouldRecommend: null as boolean | null, reviewerName: "", email: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitted, setSubmitted] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 2000)) setIsSubmitting(false) setSubmitted(true) } const handleInputChange = (field: string, value: string | boolean) => { setFormData((prev) => ({ ...prev, [field]: value })) } const resetForm = () => { setSubmitted(false) setFormData({ productName: "", reviewTitle: "", reviewText: "", pros: "", cons: "", wouldRecommend: null, reviewerName: "", email: "", }) setRating(0) } if (submitted) { return (

🎉

Thank You!

Your review has been submitted successfully. We appreciate your feedback! 💝

) } return (

Product Review 📝

Share your experience and help others make informed decisions

{/* Left Column */}

{/* Product Name */}

Product Name 🛍️ handleInputChange("productName", e.target.value)} className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300" placeholder="Enter the product name..." />

{/* Rating */}

Overall Rating ⭐

{[1, 2, 3, 4, 5].map((star) => ( ))}

{/* Review Title */}

Review Title 📋 handleInputChange("reviewTitle", e.target.value)} className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300" placeholder="Summarize your review in one line..." />

{/* Pros */}

Pros 👍

handleInputChange("pros", e.target.value)}
                  className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none"
                  placeholder="What did you like?"
                />
              </div>

{/* Reviewer Name */}
              <div>
                <label className="block text-sm font-medium text-white/80 mb-2">Your Name 👤</label>
                <input
                  type="text"
                  required
                  value={formData.reviewerName}
                  onChange={(e) => handleInputChange("reviewerName", e.target.value)}
                  className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300"
                  placeholder="Your name"
                />
              </div>
            </div>

{/* Right Column */}
            <div className="space-y-6">
              {/* Review Text */}
              <div>
                <label className="block text-sm font-medium text-white/80 mb-2">Detailed Review 💭</label>
                <textarea
                  required
                  rows={6}
                  value={formData.reviewText}
                  onChange={(e) => handleInputChange("reviewText", e.target.value)}
                  className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none"
                  placeholder="Share your detailed experience with this product..."
                />
              </div>

{/* Cons */}
              <div>
                <label className="block text-sm font-medium text-white/80 mb-2">Cons 👎</label>
                <textarea
                  rows={4}
                  value={formData.cons}
                  onChange={(e) => handleInputChange("cons", e.target.value)}
                  className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300 resize-none"
                  placeholder="What could be better?"
                />
              </div>

{/* Email */}
              <div>
                <label className="block text-sm font-medium text-white/80 mb-2">Email 📧</label>
                <input
                  type="email"
                  required
                  value={formData.email}
                  onChange={(e) => handleInputChange("email", e.target.value)}
                  className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-xl text-white placeholder-white/40 focus:border-white/40 focus:bg-white/10 focus:outline-none transition-all duration-300"
                  placeholder="your@email.com"
                />
              </div>

{/* Would Recommend */}
              <div>
                <label className="block text-sm font-medium text-white/80 mb-3">
                  Would you recommend this product? 🤔
                </label>
                <div className="flex gap-4">
                  <button
                    type="button"
                    onClick={() => handleInputChange("wouldRecommend", true)}
                    className={`flex-1 py-3 px-4 rounded-xl border transition-all duration-300 ${
                      formData.wouldRecommend === true
                        ? "bg-white/20 border-white/40 text-white"
                        : "bg-white/5 border-white/20 text-white/60 hover:bg-white/10"
                    }`}
                  >
                    Yes 👍
                  </button>
                  <button
                    type="button"
                    onClick={() => handleInputChange("wouldRecommend", false)}
                    className={`flex-1 py-3 px-4 rounded-xl border transition-all duration-300 ${
                      formData.wouldRecommend === false
                        ? "bg-white/20 border-white/40 text-white"
                        : "bg-white/5 border-white/20 text-white/60 hover:bg-white/10"
                    }`}
                  >
                    No 👎
                  </button>
                </div>
              </div>
            </div>
          </div>

{/* Submit Button - Full Width */}
          <Button
            type="submit"
            disabled={isSubmitting || rating === 0}
            className="w-full bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30 text-white transition-all duration-700 ease-out hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed py-3"
          >
            {isSubmitting ? (
              <>
                <div className="animate-spin rounded-full h-4 w-4 border-2 border-white/30 border-t-white mr-2" />
                Submitting Review... ⏳
              </>
            ) : (
              <>
                <Send className="w-4 h-4 mr-2" />
                Submit Review 🚀
              </>
            )}
          </Button>
        </form>
      </div>

<footer className="fixed bottom-4 left-1/2 transform -translate-x-1/2 backdrop-blur-xl bg-white/10 border border-white/20 rounded-full px-4 py-2">
        <p className="text-white/60 text-sm">
          Designed and Developed with ❤️ by{" "}
          <a
            href="https://www.youtube.com/@diecastbydollar"
            target="_blank"
            rel="noopener noreferrer"
            className="text-white/80 hover:text-white underline-offset-4 hover:underline transition-all duration-300"
          >
            Dollar Gill
          </a>
        </p>
      </footer>
    </div>
  )
}</article></body></html>

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This